<div class="terminal-root">
    <div class="terminal-search">
        <nz-input-group [nzSuffix]="suffixIcon" class="terminal-root-input-group">
            <input (ngModelChange)="searchTree($event)" [(ngModel)]="searchValue" nz-input
                   type="text"/>
        </nz-input-group>
        <ng-template #suffixIcon>
            <i nz-icon nzType="search"></i>
        </ng-template>
    </div>
    <div class="terminal-tree">
        <nz-tree #nzTree
                 (nzClick)="activeNode($event)"
                 (nzExpandChange)="openEvent($event)"
                 [nzData]="nodes"
                 [nzExpandedKeys]="nzExpandedKeys"
                 [nzTreeTemplate]="nzTreeTemplate"
                 nzAsyncData
                 nzBlockNode>
            <ng-template #nzTreeTemplate let-node>
                <span [class.active]="activedNode?.key === node.key"
                      class="custom-node"
                >

                     <span *ngIf="node.origin.type === 'directory' || node.origin.type === 'integration_directory'">
                          <i class="hy-icon" nz-icon nzType="dr:hy-module" theme="fill"></i>
                     </span>
                     <span *ngIf="node.origin.type === 'integration'">
                          <i class="hy-icon" nz-icon nzType="dr:user_yw" theme="fill"></i>
                     </span>
                    <span class="folder-name">{{ node.title }}</span>
                </span>
            </ng-template>
        </nz-tree>
    </div>
</div>
